.preloader-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  animation: md-preloader-inner-rotate 5.25s cubic-bezier(.35, 0, .25, 1) infinite;

  .preloader-inner-gap {
    position: absolute;
    width: 2px;
    left: 50%;
    margin-left: -1px;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-top: 3px solid #010101;
  }

  .preloader-inner-left,
  .preloader-inner-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    overflow: hidden
  }

  .preloader-inner-half-circle {
    position: absolute;
    top: 0;
    height: 100%;
    width: 200%;
    box-sizing: border-box;
    border: 3px solid #010101;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    animation-iteration-count: infinite;
    animation-duration: 1.3125s;
    animation-timing-function: cubic-bezier(.35, 0, .25, 1)
  }

  .preloader-inner-left {
    left: 0;

    .preloader-inner-half-circle {
      left: 0;
      border-right-color: transparent !important;
      animation-name: md-preloader-left-rotate;
    }
  }

  .preloader-inner-right {
    right: 0;

    .preloader-inner-half-circle {
      right: 0;
      border-left-color: transparent !important;
      animation-name: md-preloader-right-rotate;
    }
  }
}

@keyframes md-preloader-left-rotate {

  0%,
  100% {
    transform: rotate(130deg)
  }

  50% {
    transform: rotate(-5deg)
  }
}

@keyframes md-preloader-right-rotate {

  0%,
  100% {
    transform: rotate(-130deg)
  }

  50% {
    transform: rotate(5deg)
  }
}

@keyframes md-preloader-inner-rotate {
  12.5% {
    transform: rotate(135deg)
  }

  25% {
    transform: rotate(270deg)
  }

  37.5% {
    transform: rotate(405deg)
  }

  50% {
    transform: rotate(540deg)
  }

  62.5% {
    transform: rotate(675deg)
  }

  75% {
    transform: rotate(810deg)
  }

  87.5% {
    transform: rotate(945deg)
  }

  100% {
    transform: rotate(1080deg)
  }
}

@keyframes md-preloader-outer {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

.preloader {
  display: block;
  width: 40px;
  height: 40px;
  animation: md-preloader-outer 3.3s linear infinite;
}